<template>
  <div>
    <van-search
      v-model="value"
      show-action
      placeholder="请输入搜索关键词"
      @input="onInput"
      @cancel="onCancel"
    />
    <div v-show="list.length">
      <cinema-list :height="myheight" :list="list"></cinema-list>
    </div>
    <div v-show="!list.length" class="near">
      <div class="title">离你最近</div>
      <ul>
        <li v-for="item in nearList" :key="item.Distance">
          {{ item.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import cinemaList from '@/components/cinemas/cinemaList.vue'
import http from '@/util/http'
// 引入工具类showTab
import showTab from '@/util/showTab'
export default {
  mixins: [showTab],
  components: {
    cinemaList
  },
  computed: {
    ...mapState(['cinemaListState', 'cityId']),
    myheight () {
      return document.documentElement.clientHeight - 44 + 'px'
    }
  },
  data () {
    return {
      value: '',
      list: [],
      nearList: []
    }
  },
  mounted () {
    http({
      url: `/gateway?cityId=${this.cityId}&k=3948766`,
      headers: {
        'X-Host': ' mall.film-ticket.cinema.recommend'
      }
    }).then((res) => {
      this.nearList = res.data.data.cinemas
    })
  },
  methods: {
    onInput (val) {
      if (val == '') return (this.list.length = 0)
      this.list = this.cinemaListState.filter((item) => {
        return item.name.includes(val) || item.address.includes(val)
      })
    },
    onCancel () {
      this.$router.back()
    }
  }
}
</script>

<style lang='scss' scoped>
.near {
  padding: 0 15px;
  .title {
    color: #bdc0c5;
    font-size: 13px;
    margin: 18px 0;
  }
  ul {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    color: #191a1b;
    li {
      height: 30px;
      padding: 8px 12px;
      font-size: 13px;
      background-color: #fff;
      border-radius: 3px;
      margin: 5px;
    }
  }
}
</style>
